<!--
 * @Descripttion:
 * @version:
 * @Editor: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="mainPage">
    <DocHeader class="header" :title="title" :bottomBorder="false"> </DocHeader>
    <div>
      <div class="mainBox">
        <div class="line-20 clearfloat">
          <div class="box-6 bor-r left txt-c">
            日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期
          </div>
          <div class="box-6 bor-r left txt-c c-blue">
            {{ formatFirstDate(pageData.startStamp, realPage) }}
          </div>
          <div class="box-6 bor-r left txt-c c-blue">
            {{ getDateStr(pageData.startStamp, 1) }}
          </div>
          <div class="box-6 bor-r left txt-c c-blue">
            {{ getDateStr(pageData.startStamp, 2) }}
          </div>
          <div class="box-6 bor-r left txt-c c-blue">
            {{ getDateStr(pageData.startStamp, 3) }}
          </div>
          <div class="box-6 bor-r left txt-c c-blue">
            {{ getDateStr(pageData.startStamp, 4) }}
          </div>
          <div class="box-6 bor-r left txt-c c-blue">
            {{ getDateStr(pageData.startStamp, 5) }}
          </div>
          <div class="box-6 left txt-c c-blue">
            {{ getDateStr(pageData.startStamp, 6) }}
          </div>
        </div>
        <div class="line-20 clearfloat bor-t">
          <div class="box-6 bor-r left txt-c">住院天数</div>
          <div class="box-6 bor-r left txt-c c-blue">{{ getRyDate(1) }}</div>
          <div class="box-6 bor-r left txt-c c-blue">{{ getRyDate(2) }}</div>
          <div class="box-6 bor-r left txt-c c-blue">{{ getRyDate(3) }}</div>
          <div class="box-6 bor-r left txt-c c-blue">{{ getRyDate(4) }}</div>
          <div class="box-6 bor-r left txt-c c-blue">{{ getRyDate(5) }}</div>
          <div class="box-6 bor-r left txt-c c-blue">{{ getRyDate(6) }}</div>
          <div class="box-6 left txt-c c-blue">{{ getRyDate(7) }}</div>
        </div>
        <div v-if="data.SHDay" class="line-20 clearfloat bor-t">
          <div class="box-6 bor-r left txt-c">术后天数</div>
          <div
            v-for="(item, idx) in data.SHDay[realPage]"
            :key="idx"
            class="box-6 left txt-c c-red"
            :class="{ 'bor-r': idx !== 6 }"
          >
            {{ item }}
          </div>
        </div>
        <!-- Main -->
        <div class="clearfloat bor-t">
          <!-- label -->
          <div class="left box-6">
            <div class="line-20 txt-c bor-r">时间</div>
            <div class="line-40 flex txt-c bor-t bor-r">
              <div class="line-40 flex-1 flex flex-c flex-column bor-r">
                <span class="i-b line-1 mt-1">脉搏</span>
                <span class="i-b line-1 f-12 mt-5">[次/分]</span>
              </div>
              <div class="line-40 flex-1 flex flex-column flex-c">
                <span class="i-b line-1 mt-1">体温</span>
                <span class="i-b line-1 f-12 mt-5">[℃]</span>
              </div>
            </div>
            <div class="line-51 flex txt-c bor-r">
              <div class="line-51 flex-1 bor-r">
                <span class="mt-2 i-b"></span>
              </div>
              <div class="line-51 flex-1">
                <span class="mt-2 i-b"></span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-r">
              <div class="line-100 flex-1 bor-r">
                <span class="mt-2 i-b f-13">160 次/分</span>
              </div>
              <div class="line-100 flex-1">
                <span class="mt-2 i-b f-13">41 ℃</span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-r">
              <div class="line-100 flex-1 bor-r">
                <span class="mt-2 i-b f-13">140 次/分</span>
              </div>
              <div class="line-100 flex-1">
                <span class="mt-2 i-b f-13">40 ℃</span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-r">
              <div class="line-100 flex-1 bor-r">
                <span class="mt-2 i-b f-13">120 次/分</span>
              </div>
              <div class="line-100 flex-1">
                <span class="mt-2 i-b f-13">39 ℃</span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-r">
              <div class="line-100 flex-1 bor-r">
                <span class="mt-2 i-b f-13">100 次/分</span>
              </div>
              <div class="line-100 flex-1">
                <span class="mt-2 i-b f-13">38 ℃</span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-r">
              <div class="line-100 flex-1 bor-r">
                <span class="mt-2 i-b f-13">80 次/分</span>
              </div>
              <div class="line-100 flex-1">
                <span class="mt-2 i-b f-13">37 ℃</span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-r">
              <div class="line-100 flex-1 bor-r">
                <span class="mt-2 i-b f-13">60 次/分</span>
              </div>
              <div class="line-100 flex-1">
                <span class="mt-2 i-b f-13">36 ℃</span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-r">
              <div class="line-100 flex-1 bor-r">
                <span class="mt-2 i-b f-13">40 次/分</span>
              </div>
              <div class="line-100 flex-1">
                <span class="mt-2 i-b f-13">35 ℃</span>
              </div>
            </div>
            <div class="line-9 flex txt-c bor-r">
              <div class="line-9 flex-1 bor-r">
                <span class="mt-2 i-b"></span>
              </div>
              <div class="line-9 flex-1">
                <span class="mt-2 i-b"></span>
              </div>
            </div>
            <div class="line-100 flex txt-c bor-t bor-r">
              <div class="line-100 flex-1 bor-r flex flex-c flex-column">
                <!-- <div class="font-v line-1">疼 痛 ︵分︶</div> -->
                <div class="line-1">疼</div>
                <div class="line-1">痛</div>
                <div class="line-1">︵</div>
                <div class="line-1">分</div>
                <div class="line-1">︶</div>
              </div>
              <div class="line-100 flex-1">
                <div class="txt-r f-12 line-16 mt-3 mr-12">10</div>
                <div class="txt-r f-12 line-16 mr-14">8</div>
                <div class="txt-r f-12 line-16 mr-14">6</div>
                <div class="txt-r f-12 line-16 mr-14">4</div>
                <div class="txt-r f-12 line-16 mr-14">2</div>
                <div class="txt-r f-12 line-16 mr-14">0</div>
              </div>
            </div>
          </div>
          <!-- grid -->
          <div :class="['line-20', 'txt-c']">
            <div
              v-for="(col, cIdx) in 7"
              :key="cIdx"
              :class="['box-6', 'left']"
            >
              <div :class="['box-1', 'left', 'bor-r', 'c-red']">2</div>
              <div :class="['box-1', 'left', 'bor-r']">6</div>
              <div :class="['box-1', 'left', 'bor-r']">10</div>
              <div :class="['box-1', 'left', 'bor-r']">2</div>
              <div :class="['box-1', 'left', 'bor-r', 'c-red']">6</div>
              <div
                :class="['box-1', 'left', cIdx === 6 ? '' : 'bor-r', 'c-red']"
              >
                10
              </div>
            </div>
          </div>
          <div class="right box-42">
            <div class="canvasbox left">
              <div class="" style="position: relative">
                <canvas
                  ref="canvasMain"
                  class="canvasMain"
                  width="840px"
                  height="900px"
                />
              </div>
            </div>
            <div
              v-for="(line, lIdx) in 45"
              :key="lIdx"
              :class="[
                'line1-20',
                'clearfloat',
                'bor-t',
                lIdx === 5 ? 'bor-t-red' : lIdx % 5 == 0 ? '' : 'bor-t-blue'
              ]"
            >
              <div
                v-for="(col, cIdx) in 42"
                :key="cIdx"
                :class="[
                  'box-1',
                  'txt-c',
                  cIdx == 41 ? '' : 'bor-r',
                  'left',
                  (cIdx + 1) % 6 === 0 ? 'bor-r-red' : 'bor-r-blue'
                ]"
              ></div>
            </div>
          </div>
        </div>
        <!-- bottom -->
        <template v-if="data.breath">
          <div class="line-20 clearfloat bor-t">
            <div class="box-6 txt-c left bor-r">呼吸[次/分]</div>
            <div
              v-for="(col, cIdx) in data.breath[realPage]"
              :key="cIdx"
              :class="[
                'box-1',
                'txt-c',
                cIdx == 41 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              <div :class="['line-1', 'txt-c']">
                {{ col.isNumUp ? col.val : col.isHXJ ? 'R' : '' }}
              </div>
              <div
                :class="[
                  'line-1',
                  'txt-c',
                  (col.val && !col.isNumUp && !col.isHXJ) ||
                  (col.val == '' && col.isNumUp && col.isHXJ)
                    ? 'mt-14'
                    : ''
                ]"
              >
                {{ !col.isNumUp ? col.val : col.isHXJ ? 'R' : '' }}
              </div>
            </div>
          </div>
          <div class="line-24 clearfloat bor-t">
            <div class="box-6 txt-c left bor-r">血压[mmHg]</div>
            <div
              v-for="(col, cIdx) in data.bloodPressure[realPage]"
              :key="cIdx"
              :class="[
                'box-3',
                'txt-c',
                'left',
                cIdx !== 13 ? 'bor-r' : '',
                'c-blue'
              ]"
            >
              {{ col }}
            </div>
          </div>
          <div class="line-24 clearfloat bor-t">
            <div class="box-6 txt-c left bor-r">大便次数[次/日]</div>
            <div
              v-for="(col, cIdx) in data.shit[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col }}
              <!-- {{ formatShit(col, pageData.startStamp, cIdx) }} -->
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">入量[ml]</div>
            <div
              v-for="(col, cIdx) in data.input[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">出量[ml]</div>
            <div
              v-for="(col, cIdx) in data.output[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">体重[kg]</div>
            <div
              v-for="(col, cIdx) in data.weight[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">身高[cm]</div>
            <div
              v-for="(col, cIdx) in data.height[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">尿量[ml]</div>
            <div
              v-for="(col, cIdx) in data.urine[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col }}
            </div>
          </div>
          <div class="line-24 clearfloat bor-t">
            <div class="box-6 txt-c left bor-r">血氧饱和度[%]</div>
            <div
              v-for="(col, cIdx) in 14"
              :key="cIdx"
              :class="[
                'box-3',
                'txt-c',
                'left',
                cIdx !== 13 ? 'bor-r' : '',
                'c-blue'
              ]"
            ></div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">快速血糖[mmol/L]</div>
            <div
              v-for="(col, cIdx) in data.bloodSugar[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">
              {{
                data.custom1[realPage] ? data.custom1[realPage][0].title : ''
              }}
            </div>
            <div
              v-for="(col, cIdx) in data.custom1[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col.val }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">
              {{
                data.custom2[realPage] ? data.custom2[realPage][0].title : ''
              }}
            </div>
            <div
              v-for="(col, cIdx) in data.custom2[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col.val }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">
              {{
                data.custom3[realPage] ? data.custom3[realPage][0].title : ''
              }}
            </div>
            <div
              v-for="(col, cIdx) in data.custom3[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col.val }}
            </div>
          </div>
          <div class="line-24 clearfloa bor-t">
            <div class="box-6 txt-c left bor-r">
              {{
                data.custom4[realPage] ? data.custom4[realPage][0].title : ''
              }}
            </div>
            <div
              v-for="(col, cIdx) in data.custom4[realPage]"
              :key="cIdx"
              :class="[
                'box-6',
                'txt-c',
                cIdx == 6 ? '' : 'bor-r',
                'left',
                'c-blue'
              ]"
            >
              {{ col.val }}
            </div>
          </div>
        </template>
      </div>
      <div
        class=""
        style="position: relative; margin: 10px auto 0; width: 960px"
      >
        <canvas
          ref="canvasLegend"
          class="canvas-legend"
          width="960px"
          height="20px"
        ></canvas>
      </div>
      <div class="mt-5 txt-c">第 {{ pageNum + 1 }} 周</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, nextTick, reactive, toRefs, watch } from 'vue'

import { formatTimeStamp } from '@/utils'

import DocHeader from '../DocHeader.vue'
import { CanvasFunc } from './index.js'

export default defineComponent({
  name: 'MainPage',
  components: {
    DocHeader
  },
  props: {
    pageData: {
      type: Object,
      default: () => {}
    },
    pageNum: {
      type: Number,
      default: () => 1
    },
    realPage: {
      type: Number,
      default: () => 1
    },
    data: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: '体温单'
    }
  },
  setup(props) {
    const state = reactive({
      ctx: null,
      ctxLengend: null,
      recordData: [],
      canvasMain: {},
      canvasLegend: {}
    })

    function formatFirstDate(val, realPage) {
      if (val) {
        const date = formatTimeStamp(val, 'yyyy-MM-dd'),
          dateArr = date.split('-')
        //第一页或新年的第一天显示完整
        if (realPage === 0 || (dateArr[1] === '01' && dateArr[2] === '01')) {
          return date
        }
        return date.slice(5, 10)
      }
    }

    function getDateStr(val, flag) {
      if (val) {
        const date = new Date(val + flag * 86400000).getDate(),
          month = new Date(val + flag * 86400000).getMonth() + 1
        if (date == 1) {
          return (
            month.toString().padStart(2, '0') +
            '-' +
            date.toString().padStart(2, '0')
          )
        }
        return date
      }
      return '-'
    }

    // function formatShit(val, timestamp, flag) {
    //   if (timestamp + flag * 86400000 <= Date.parse(new Date())) {
    //     return val
    //   }
    // }

    function initCanvas() {
      if (!props.data.temp) {
        return
      }
      state.ctx = new CanvasFunc()
      const { ctx } = state
      ctx.init(state.canvasMain)
      ctx.clean()
      const { temp, heart, pain, event } = props.data
      //体温
      if (temp.length <= 0 || !temp[props.realPage]) {
        return
      }
      temp[props.realPage].map((res, idx) => {
        if (res.type) {
          switch (res.type) {
            case 'gcx_clgj_gw':
              ctx.GW(idx, res.val1)
              break
            case 'gcx_clgj_yw':
              ctx.YW(idx, res.val1)
              break
            case 'gcx_clgj_kw':
              ctx.KW(idx, res.val1)
              break
            case 'gcx_clgj_ew':
              ctx.EW(idx, res.val1)
              break
          }
          if (res.val2) {
            ctx.JW(idx, res.val2)
          }
        }
      })
      // 心率 pr
      heart[props.realPage].map((res, idx) => {
        if (res.val) {
          // const isLine = idx
          //   ? !(heart[props.realPage][idx - 1].isHide === true)
          //   : true
          if (res.type == 'pr') {
            ctx.MB(idx, res.val)
          } else if (res.type == 'gcx_ecg_s') {
            ctx.XL(idx, res.val)
          }
        }
      })
      //疼痛
      pain[props.realPage].map((res, idx) => {
        if (res[0] || res[0] === 0) {
          res.map(_res => ctx.TT(idx, _res))
        }
      })
      //事件
      event[props.realPage].map((res, idx) => {
        if (res[0]) {
          res.map(_res => ctx.TXT(_res, idx))
        }
      })
    }

    function initLegend() {
      state.ctxLengend = new CanvasFunc()
      const { ctxLengend } = state
      ctxLengend.init(state.canvasLegend)
      ctxLengend.clean()

      ctxLengend.TXTLegendDraw('脉率', 0.5, '#000')
      ctxLengend.MBLegend(32)
      ctxLengend.TXTLegendDraw('心率', 100.5, '#000')
      ctxLengend.XLLegend(132)
      ctxLengend.TXTLegendDraw('耳温', 200.5, '#000')
      ctxLengend.EWLegend(232)
      ctxLengend.TXTLegendDraw('口温', 300.5, '#000')
      ctxLengend.KWLegend(332)
      ctxLengend.TXTLegendDraw('腋温', 400.5, '#000')
      ctxLengend.YWLegend(432)
      ctxLengend.TXTLegendDraw('肛温', 500.5, '#000')
      ctxLengend.GWLegend(532)
      ctxLengend.TXTLegendDraw('疼痛强度', 600.5, '#000')
      ctxLengend.TTLegend(652)
    }

    function getRyDate(idx) {
      return idx + props.realPage * 7
    }

    watch(
      () => props.data,
      () => {
        nextTick(() => {
          initCanvas()
          initLegend()
        })
      },
      { deep: true, immediate: true }
    )

    watch(
      () => props.pageData,
      val => {
        if (val && val.timeBoxes) {
          state.recordData = val.timeBoxes.map(item => {
            return {
              id: '',
              createTime: item.sTime,
              showValue: '',
              createdBy: ''
            }
          })
          state.recordData.push({
            id: '',
            createTime: val.timeBoxes[val.timeBoxes.length - 1].eTime,
            showValue: '',
            createdBy: ''
          })
        }
      },
      { deep: true, immediate: true }
    )

    return {
      ...toRefs(state),
      formatFirstDate,
      getDateStr,
      // formatShit,
      getRyDate
    }
  }
})
</script>
<style lang="scss" scoped>
.mainPage {
  box-sizing: content-box;
  margin: 0 auto;
  width: 1100px;
  // height: 1553.42px;
  height: 1554px;
  // width: 294mm;
  // height: calc(415.8mm - 1px);
  overflow: hidden;
  // border: 1px solid #F0F0F0;

  .mainBox {
    box-sizing: content-box;
    border: 1px solid #000;
    width: 960px;
    margin: 0 auto;
  }

  .flex {
    display: flex;
  }

  .flex {
    &-1 {
      flex: 1;
    }

    &-c {
      justify-content: center;
      align-items: center;
    }

    &-column {
      flex-direction: column;
    }
  }

  .txt {
    &-c {
      text-align: center;
    }

    &-r {
      text-align: right;
    }
  }

  .w {
    &-23 {
      width: 23px;
    }

    &-940 {
      width: 940px;
    }

    &-960 {
      width: 960px;
    }
  }

  .f {
    &-12 {
      font-size: 12px;
    }
  }

  .font-v {
    writing-mode: vertical-lr;
  }

  .box {
    &-1 {
      width: 20px;
      height: 100%;
      box-sizing: border-box;
    }

    &-3 {
      width: 60px;
      height: 100%;
      box-sizing: border-box;
    }

    &-6 {
      width: 120px;
      height: 100%;
      box-sizing: border-box;
    }

    &-42 {
      width: 840px;
      height: 100%;
      box-sizing: border-box;
    }
  }

  .line {
    &-1 {
      line-height: 1;
    }

    &-10 {
      height: 15px;
      line-height: 15px;
    }

    &-9 {
      height: 9px;
      line-height: 9px;
    }

    &-12 {
      height: 12px;
      line-height: 12px;
    }

    &-16 {
      line-height: 16px;
    }

    &1-20 {
      height: 20px;
      line-height: 20px;
    }

    &-20 {
      height: 30px;
      line-height: 30px;
    }

    &-24 {
      height: 24px;
      line-height: 24px;
    }

    &-40 {
      height: 40px;
      line-height: 40px;
    }

    &-51 {
      height: 51px;
      line-height: 15px;
    }

    &-60 {
      height: 60px;
      line-height: 15px;
    }

    &-50 {
      height: 75px;
      line-height: 15px;
    }

    &-100 {
      height: 100px;
      line-height: 15px;
    }
  }

  .mt {
    &-1 {
      margin-top: 1px;
    }

    &-2 {
      margin-top: 2px;
    }

    &-3 {
      margin-top: 3px;
    }

    &-5 {
      margin-top: 5px;
    }

    &-8 {
      margin-top: 8px;
    }

    &-10 {
      margin-top: 10px;
    }

    &-14 {
      margin-top: 14px;
    }

    &--940 {
      margin-top: -940px;
    }

    &--960 {
      margin-top: -960px;
    }
  }

  .mr {
    &-12 {
      margin-right: 12px;
    }

    &-14 {
      margin-right: 14px;
    }
  }

  .m {
    &0-auto {
      margin: 0 auto;
    }

    &8-auto {
      margin: 8px auto 0;
    }
  }

  .trY {
    &--10 {
      transform: translateY(-10px);
    }
  }

  .mr {
    &-12 {
      margin-right: 12px;
    }

    &-14 {
      margin-right: 14px;
    }
  }

  .m {
    &0-auto {
      margin: 0 auto;
    }

    &8-auto {
      margin: 8px auto 0;
    }
  }

  .trY {
    &--10 {
      transform: translateY(-10px);
    }
  }

  .bor {
    &-a {
      border: 1px solid #000;
      box-sizing: border-box;
    }

    &-b {
      border-bottom: 1px solid #000;
      box-sizing: border-box;

      &-red {
        border-bottom-color: #f00;
      }

      &-blue {
        border-bottom-color: #89b0ff;
      }
    }

    &-r {
      border-right: 1px solid #000;
      box-sizing: border-box;

      &-red {
        border-right-color: #f00;
      }

      &-blue {
        border-right-color: #89b0ff;
      }
    }

    &-t {
      border-top: 1px solid #000;
      box-sizing: border-box;

      &-red {
        border-top-color: #f00;
      }

      &-blue {
        border-top-color: #89b0ff;
      }
    }

    &-red {
      border-color: #f00;
    }
  }

  .i-b {
    display: inline-block;
  }

  .c {
    &-red {
      color: #f00;
    }
  }

  .relative {
    position: relative;
  }

  .canvasbox {
    display: flex;
    align-items: flex-start;
    height: 0;
  }
}

.header {
  width: 960px;
  margin: 30px auto 0;

  ::v-deep {
    .info {
      span {
        color: #155ef3;
      }
    }
  }
}

.c {
  &-blue {
    color: #155ef3;
  }

  &-red {
    color: #f00;
  }
}

.f-13 {
  font-size: 13px;
}

.canvas-legend {
  width: 960px;
}
</style>
